<template>
  <div class="icon_playlist_selector_btn user_ns pr">
    <div class="btn fcc cur_p" @click="changeSelectorState">
      <p class="title">
        选择分类
      </p>
      <i class="icon_playlist_selector__arrow_d"></i>
    </div>
    <div class="playlist_selector pa" v-show="state">
      <div class="playlist_selector_title">
        <i class="icon_playlist_selector_btn_all cur_p td_u" @click="changeTitle(-1,-1);changeSelectorState()">
          全部风格
        </i>
      </div>
      <div class="playlist_selector_content pr">
        <div class="playlist_selector_item" v-for="(item,index) in categories" :key="item.name">
          <div class="playlist_selector_item_left fcc">
            <i :class="'icon_playlist_selector_c'+index"></i>
            <p>{{item.name}}</p>
          </div>
          <div class="playlist_selector_item_right">
            <p class="playlist_selector_item_tag cur_p pr td_u" :class="tag.name===current?'active':''" v-for="(tag,index) in item.subs" @click="changeTitle(tag.category,index);changeSelectorState()">{{tag.name}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="m-mask" v-show="state" @click="changeSelectorState"></div>
</template>

<script setup lang="ts">
import { PropType,ref } from "vue";
import { Category } from "../../types/types";

const props=defineProps({
  current:{
    type:String,
    required:true
  },
  categories:{
    type:Array as PropType<Category[]>,
    required:true
  },
  changeTitle:{
    type:Function as  PropType<(n?:number,m?:number)=>void>,
    required:true
  }
})

//选择器状态
const state=ref(false)

//打开选择器
const changeSelectorState=()=>{
  state.value=!state.value
}

console.log(props)
</script>

<style lang="scss" scoped>
.title{
  font-size: 12px;
  color: #0c73c2 ;
}
.playlist_selector{
  width: 700px;
  height: 388px;
  left: -92px;
  top: 45px;
  background: #fff;
  border: 1px solid #bebebe;
  border-radius: 6px;
  box-shadow: -3px 3px 10px #bebebe;
  z-index: 1002;
  &::after{
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    left: 128px;
    top: -8px;
    background-color: #fff;
    border: 1px solid #bebebe;
    box-shadow: -3px 3px 10px #bebebe;
    transform: rotate(-45deg);
    clip-path: polygon(0 0,100% 100%,100% 0,0 0);
    z-index: 1003;
  }

  &_title{
    height: 58px;
    border-bottom: 1px solid #e6e6e6;
    i{
      font-size: 12px;
      color: #333;
      line-height: 26px;
      text-align: center;
      margin: 16px 0 0 26px;
      font-style: normal;
    }
  }
  &_content{
    height: 330px;
    overflow: hidden;
    &::after{
      content: '';
      position: absolute;
      width: 97px;
      height: 328px;
      top: 0;
      left: 0;
      border-right: 1px solid #e6e6e6;
    }
  }
  &_item{
      width: 100%;
      display: flex;
      overflow: hidden;
      &_left{
        width: 97px;
        height: auto;
        flex: none;
        border-right: 1px solid #e6e6e6;
        padding: 16px 0 0 ;
        color: #333;
        font-weight: bold;
        p{
          font-size: 12px;
        }
        & i{
          margin-right: 8px;
        }
      }
      &_right{
        width: 601px;
        padding: 16px 15px 0 15px;
        white-space: pre-wrap;
      }
      &_tag{
        display: inline-block;
        font-size: 12px;
        padding: 1px 6px;
        white-space:nowrap;
        color: #333;
        border-radius: 2px;
        margin:0 12px 6px 0;
        &::after{
          content: '';
          position: absolute;
          height: 10px;
          width: 1px;
          top: 5px;
          right: -8px;
          background: #d8d8d8;
        }
        &.active{
          background: #a7a7a7;
          color: #fff;
        }
      }
    }
}
</style>


